<template>
    <div id="customer_notice_root">
      <div class="notice_login" :gradientBackground="{colors:['#252930','#2F3541'],orientation: 0, cornerRadius: 8}">
        <span class="span_title" :focusable="false">{{noticeTitle}}</span>
        <div style="width: 512px;height:512px;margin-top:40px;background-color: white" >
          <img v-if="qrCodeData" :src="qrCodeData" style="width: 512px;height:512px"/>
        </div>

      </div>
  </div>
</template>

<script>
const {useESRouter} = require("@extscreen/es3-router");
import {defineComponent, onMounted,ref} from "vue";
import {useESToast,useESLocalStorage,useESEventBus} from '@extscreen/es3-core'

const {__CONFIG__} = require("../config/global");

const {useRequestManager} = require("../../api/UseApi");
export default defineComponent({
  name: "LoginView",
  setup(props,{emit}) {
    const viewRef = ref()
    const router = useESRouter()
    const showDialog = ref(false)
    var toast = useESToast();
    const noticeTitle = '请用微信扫码登录'
    const noticeContent = ''
    const requestManager=useRequestManager()
    const qrCodeData=ref('')
    const sceneNo=ref('')
    let timer = -1
    let loopQuery= -1
    var esLocalStorage = useESLocalStorage();
    var esEventBus = useESEventBus();
    function onESCreate(params){
      createLoginQrCode();
    }
    function onClose(evt) {
      evt.stopPropagation();
    }
    function createLoginQrCode(){
      //加载登录码
      requestManager.post("https://api.extscreen.com/extscreenapi/api/v2/zero/wechat/mini/qrcode/create",
        {
          data:{
            page: 'pages/homePage/homePage'
          }
        },true).then(res=>{
        qrCodeData.value='data:image/jpeg;base64,'+res.data
        sceneNo.value=res.message
        //生成码后，开启定时任务
        timer=setTimeout(()=>{
          toast.showToast("扫码超时，关闭页面")
          clearInterval(loopQuery);
          router.back()
        },300000)
        loopQuery=setInterval(()=>{
          pollUserInfo()
        },1000)
      }).catch(res=>{
        toast.showToast('获取登录二维码失败')
      })
    }
    const pollUserInfo=()=>{
      requestManager.post("https://api.extscreen.com/extscreenapi/api/v2/zero/wechat/mini/qrcode/pollUserInfo/"+sceneNo.value
        ).then(res=> {
          console.log('轮询用户信息',res)
        toast.showToast("登录成功")
        var userInfo = JSON.stringify(res);
        esLocalStorage.putString(__CONFIG__.userInfoKey,userInfo)
        esEventBus.emit(__CONFIG__.userInfoKey,userInfo)
        onBackPressed()
      })
    }
    const show = () => {
      showDialog.value = true
    }

    function dismiss() {
      showDialog.value = false
    }
    function onBackPressed() {
      clearTimeout(timer)
      clearInterval(loopQuery)
      router.back()
    }

    return {
      showDialog,
      noticeTitle,
      noticeContent,
      onClose,
      show,
      dismiss,
      onESCreate,
      qrCodeData,
      onBackPressed
    }
  }
})
</script>

<style scoped>
#customer_notice_root {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1920px;
  height: 1080px;
  background-color: rgba(0,0,0,0.8);
}
.notice_login {
  width: 1200px;
  height: 800px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.span_title {
  width: 1200px;
  height: 60px;
  margin-top: 70px;
  font-size: 40px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  background-color: transparent;
}

.notice_link {
  width: 1200px;
  height: 80px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  background-color: transparent;
}
.single_link {
  margin-right: 9px;
  margin-left: 9px;
  height: 70px;
  focus-background-color: #ffffff;
  border-radius: 44px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.span_link_left{
  color: #FF5415;
  font-size: 36px;
  padding-left: 18px;
}
.span_link {
  color: #FF5415;
  font-size: 36px;
  text-decoration:underline;
}
.span_link_right{
  color: #FF5415;
  font-size: 36px;
  padding-right: 18px;
}
.span_confirm {
  width: 260px;
  height: 80px;
  border-radius: 44px;
  background-color: rgba(255,255,255,0.1);
  justify-content: center;
  align-items: center;
  margin-right: 25px;
  margin-left: 25px;
  focus-background-color: #ffffff;
}
.txt {
  color: rgba(255,255,255,0.7);
  font-size: 36px;
  text-align: center;
  focus-color: #000000;
}
</style>
